aboutsummaryrefslogtreecommitdiff
path: root/examples/blog-multiple-authors/src/pages/posts/[...page].astro
blob: 8a6c9a730a8264df0bec8916ed57c0ec9b4cb3e6 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
---
import MainHead from "../../components/MainHead.astro";
import Nav from "../../components/Nav.astro";
import PostPreview from "../../components/PostPreview.astro";
import Pagination from "../../components/Pagination.astro";
import authorData from "../../data/authors.json";

export async function getStaticPaths({ paginate, rss }) {
	const allPosts = await Astro.glob("../post/*.md");
	const sortedPosts = allPosts.sort(
		(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
	);

	// Generate an RSS feed from this collection of posts.
	// NOTE: This is disabled by default, since it requires `site` to be set in your "astro.config.mjs" file.
	//   rss({
	//     title: 'Don’s Blog',
	//     description: 'An example blog on Astro',
	//     customData: `<language>en-us</language>`,
	//     items: sortedPosts.map(item => ({
	//       title: item.title,
	//       description: item.description,
	//       link: item.url,
	//       pubDate: item.date,
	//     })),
	//   });

	// Return a paginated collection of paths for all posts
	return paginate(sortedPosts, { pageSize: 1 });
}

// page
const title = "Don’s Blog";
const description = "An example blog on Astro";
const { canonicalURL } = Astro;
const { page } = Astro.props;
---

<html lang="en">
	<head>
		<title>{title}</title>
		<MainHead
			{title}
			{description}
			image={page.data[0].frontmatter.image}
			canonicalURL={canonicalURL.toString()}
			prev={page.url.prev}
			next={page.url.next}
		/>

		<style lang="scss">
			.title {
				font-size: 3em;
				letter-spacing: -0.04em;
				margin-top: 2rem;
				margin-bottom: 0;
				text-align: center;
			}

			.count {
				font-size: 1em;
				display: block;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<Nav {title} />

		<main class="wrapper">
			<h2 class="title">All Posts</h2>
			<small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small>
			{page.data.map((post) => (
				<PostPreview post={post} author={authorData[post.frontmatter.author]} />
			))}
		</main>

		<footer>
			<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
		</footer>
	</body>
</html>